<template>
   <div>
      <div class="query-part">
         <el-form class="query-container" size="small">
            <!-- 第一行 -->
            <div class="query-row">
               <div class="query-col">
                  <el-form-item label="学校名称:">
                     <el-input
                        v-model="queryForm.schoolName"
                        clearable
                     ></el-input>
                  </el-form-item>
               </div>
               <div class="query-col">
                  <el-form-item label="院校位置:">
                     <el-input
                        v-model="queryForm.schoolArea"
                        clearable
                     ></el-input>
                  </el-form-item>
               </div>
               <div class="query-col">
                  <el-form-item label="学校层次:">
                     <el-input
                        v-model="queryForm.schoolLevel"
                        clearable
                     ></el-input>
                  </el-form-item>
               </div>
               <div class="btn-container">
                  <el-button
                     @click="getCollegeList()"
                     class="btn"
                     type="primary"
                     size="mini"
                     ><el-icon style="margin-right: 2px"><Search /></el-icon
                     >查询</el-button
                  >
                  <el-button
                     @click="resetBtn"
                     class="btn"
                     type="primary"
                     size="mini"
                     plain
                     ><el-icon style="margin-right: 2px"><Refresh /></el-icon
                     >重置</el-button
                  >
               </div>
            </div>
         </el-form>
      </div>

      <div style="margin-top: 25px">
         <ul>
            <li
               v-for="(college, i) in collegeList"
               :key="i"
               style="
                  border-bottom: 1px solid #f0f2f6;
                  height: 75px;
                  background-color: #fff;
                  display: flex;
                  align-items: center;
                  padding: 0 18px;
                  justify-content: space-between;
               "
            >
               <div style="display: flex">
                  <div style="height: 50px; width: 50px">
                     <el-image
                        style="width: 100%; height: 100%"
                        :src="
                           college.schoolLogo
                              ? college.schoolLogo
                              : '@/assets/logo.png'
                        "
                        :fit="contain"
                     />
                  </div>
                  <div style="margin-left: 20px">
                     <div>
                        <span style="font-size: 18px; font-weight: 700">{{
                           college.schoolName
                        }}</span>
                        <el-tag
                           type="danger"
                           style="margin-left: 15px; margin-top: -2px"
                           >{{ college.schoolLevel }}</el-tag
                        >
                     </div>
                     <el-tag
                        type="warning"
                        style="float: left; margin-top: 3px"
                        >{{ college.schoolType }}</el-tag
                     >
                  </div>
               </div>
               <div>
                  <el-button type="warning" @click="seeMajors(college.id)" plain
                     >查看专业</el-button
                  >
               </div>
            </li>
         </ul>
      </div>

      <div>
         <el-dialog
            style="margin-top: 218px"
            v-model="dialogShow"
            width="600px"
         >
            <template #header>
               <span style="font-size: 20px; font-weight: 600">院校专业</span>
            </template>

            <div>
               <el-table
                  :data="collegeMajors"
                  :header-cell-style="{
                     height: '40px',
                     fontSize: '14px',
                     color: '#434444',
                     backgroundColor: '#ecf6fd',
                  }"
                  style="width: 100%"
               >
                  <el-table-column
                     prop="majorName"
                     header-align="center"
                     align="center"
                     label="专业名称"
                  />
                  <el-table-column
                     prop="majorCode"
                     header-align="center"
                     align="center"
                     label="专业代码"
                  />
                  <el-table-column
                     prop="majorType"
                     header-align="center"
                     align="center"
                     label="专业类型"
                  />
               </el-table>
            </div>
         </el-dialog>
      </div>
   </div>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
import $axios from "@/axios";

export default {
   name: "CollegeInfo",
   setup() {
      let queryForm = reactive({
         schoolArea: "",
         schoolLevel: "",
         schoolName: "",
      });

      let collegeList = ref([]);

      let collegeMajors = ref([]);

      let dialogShow = ref(false);

      function getCollegeList() {
         $axios.post("/general2/getCollegeList", queryForm).then((res) => {
            collegeList.value = res.data.data;

            for (let item of collegeList.value) {
               if (item.schoolLogo) {
                  item.schoolLogo = require("@/assets/images/" +
                     item.schoolLogo);
               }
            }
         });
      }

      function resetBtn() {
         queryForm.schoolArea = "";
         queryForm.schoolLevel = "";
         queryForm.schoolName = "";

         getCollegeList();
      }

      function seeMajors(collegeId) {
         $axios
            .post("/general2/getCollegeMajors", {
               collegeId: collegeId,
            })
            .then((res) => {
               collegeMajors.value = res.data.data;
               dialogShow.value = true;
            });
      }

      onMounted(() => {
         getCollegeList();
      });

      return {
         queryForm,
         getCollegeList,
         collegeList,
         resetBtn,
         seeMajors,
         collegeMajors,
         dialogShow,
      };
   },
};
</script>

<style scoped>
.query-part {
   padding: 18px 18px 10px 18px;
   background-color: #fff;
   border-radius: 5px;
   margin: 15px 0;
   font-size: 14px;
}

.query-title {
   display: flex;
   margin-top: -6px;
   margin-left: -18px;
   padding-left: 6px;
   margin-bottom: 6px;
   width: 100%;
   height: 20px;
   border-left: 6px solid rgb(24, 144, 255);
}

.query-container {
   margin-top: 18px;
   padding: 0 5px;
}

.query-row {
   display: flex;
   justify-content: space-between;
   height: 30px;
}

.query-row {
   position: relative;
   width: 100%;
   margin-bottom: 15px;
   display: flex;
   justify-content: flex-start;
}

.query-col {
   height: 100%;
   width: 16%;
   min-width: 16%;
   max-width: 16%;
   margin-right: 5%;
}

.btn-container {
   display: flex;
   justify-content: flex-end;
   height: 100%;
   min-width: 37%;
   margin-right: -5%;
   margin-top: -3px;
}

.btn {
   width: 70px;
   height: 90%;
}

.list-part {
   padding: 10px 14px 10px 14px;
   background-color: #fff;
   border-radius: 5px;
}

.text_hidden {
   white-space: nowrap;
}

::v-deep .el-pagination {
   float: right;
}

::v-deep .el-dialog .el-dialog__body {
   padding-top: 0 !important;
}

.redFont {
   color: red;
}
</style>